<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header />
			</el-header>
			<el-container>
				<el-aside width="200px">
					<Aside />
				</el-aside>
				<el-main>
					<!-- 二级路由出口 -->
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
	import CategoryEdit from '@/components/CategoryEdit.vue'
	import Aside from '../components/Aside.vue'
	import Header from '../components/Header.vue'
</script>

<style lang="scss" scoped>
	.el-container {
		height: 100%;
		.el-header {
			background: -webkit-gradient(linear, left top, right top, from(#1493fa), to(#01c6fa));
			text-align: center;
			line-height: 60px;
			color: #333;
		}
		.el-aside {
			width: 200px;
			height: 100%;
			color: #333;
			background: white;
		}
		.el-main {
			height: 100vh;
			background-color: #e9eef3;
			color: #333;
		}
	}
</style>
